<template>
  <div class="common-body-page report-detail-page">
    <header class="main-header">
        <div>
          <!-- 标题 -->
          <div class="title">
            <router-link to='/' tag="p">{{$I18n.dashBoard}}<span>/</span></router-link>
            <router-link to='/addressList' tag="p">{{$I18n.address}}<span>/</span></router-link>
            <p class="black">{{$I18n.addressInfo}}</p>
          </div>
          <!-- 按钮 -->
          <div>
            <button class="btn" @click="saveAddress" v-if="!isEdit">{{$I18n.save}}</button>
            <button class="btn" @click="isEdit=false" v-else>{{$I18n.edit}}</button>
            <button class="cancel-btn" @click="cancelDialog=true">{{$I18n.cancel}}</button>
          </div>
        </div>
    </header>
    <section class="gc-body">
      <h3 class="title">{{$I18n.addressInfo}}</h3>
        <div class="body">
        <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.baseInfo}}</div>
        <el-form>
          <!-- 站点 -->
          <el-form-item :label="$I18n.site" required :class="{'no-line': isEdit}">
            <el-select v-model="addressData.site" :readonly="isEdit">
              <el-option v-for="item in siteList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
          <!-- 名字 -->
          <el-form-item :label="$I18n.name" required :class="{'no-line': isEdit}">
            <el-input v-model="addressData.name" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 国家 -->
          <el-form-item  :label="$I18n.country" required :class="{'no-line': isEdit}">
            <el-input v-model="addressData.country" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 州 -->
          <el-form-item  :label="$I18n.state" :class="{'no-line': isEdit}">
            <el-input v-model="addressData.state" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 城市 -->
          <el-form-item  :label="$I18n.city" required :class="{'no-line': isEdit}">
            <el-input v-model="addressData.city" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 地址 -->
          <el-form-item  :label="$I18n.address" required :class="{'no-line': isEdit}">
            <el-input v-model="addressData.address" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- 联系电话 -->
          <el-form-item  :label="$I18n.phone" required :class="{'no-line': isEdit}">
            <el-input v-model="addressData.phone" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- 邮编 -->
          <el-form-item  :label="$I18n.zipcode" :class="{'no-line': isEdit}">
            <el-input v-model="addressData.zipcode" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 消费税 -->
          <el-form-item :label="$I18n.taxFlag" required :class="{'no-line': isEdit}">
            <el-select v-model="addressData.taxFlag" :readonly="isEdit">
              <el-option v-for="item in taxList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$I18n.addressStatus" required :class="{'no-line': isEdit}">
            <el-select v-model="addressData.addressStatus" :readonly="isEdit">
              <el-option v-for="item in statusList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </section>
    <!-- 取消弹框 -->
    <el-dialog :title="$I18n.hint" :visible.sync="cancelDialog" custom-class="hit-dialog">
      <p class="text">{{$I18n.confirmBack}}</p>
      <div slot="footer" class="dialog-footer">
        <button class="btn"  @click="$router.push('/addressList')">{{$I18n.ok}}</button>
        <button class="cancel-btn" @click="cancelDialog=false">{{$I18n.cancel}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import INTERFACE from './interface'

export default {
  data() {
    return {
      addressId: this.$route.query.addressId,
      cancelDialog: false,
      addressData: {},
      isEdit: false,
      siteList: [
        {codeKey: 'US', codeName: '美国'},
        {codeKey: 'JP', codeName: '日本'},
        {codeKey: 'FR', codeName: '法国'},
        {codeKey: 'CA', codeName: '加拿大'},
        {codeKey: 'UK', codeName: '英国'},
        {codeKey: 'IT', codeName: '意大利'},
        {codeKey: 'DE', codeName: '德国'},
        {codeKey: 'AU', codeName: '澳大利亚'},
        {codeKey: 'ES', codeName: '西班牙'},
        {codeKey: 'KR', codeName: '韩国'},
      ],
      statusList: [
        {codeKey: 'NEW', codeName: '新开'},
        {codeKey: 'USEING', codeName: '使用中'},
        {codeKey: 'DISABLE', codeName: '废弃'}
      ],
      taxList: [
        {codeKey: 'NO', codeName: '不收取'},
        {codeKey: 'YES', codeName: '收取'}
      ]
    }
  },
  created() {
    if (!this.addressId) return
    this.isEdit = true
    INTERFACE.queryAddressDetail({addressId: this.addressId}).then(res => {
      this.addressData = res.data
    })
  },
  methods: {
    saveAddress() {
      this.addressData.addressId = this.addressId;
      INTERFACE.saveAddress(this.addressData).then(res => {
        if (res.error !== 'SUCCESS') return
        window.Tips(res.message)
        this.$router.push('/addressList')
      })
    }
  }
}
</script>